<template>
  <a-layout class="layout-demo">
    <a-layout-sider breakpoint="xl" :width="250">
      <invoice-sider @change="changeRuleId"></invoice-sider>
    </a-layout-sider>
    <a-layout>
      <a-layout style="padding: 0 10px">
        <a-layout-content>
          <invoice-content v-if="id" ref="invoiceContentRef"></invoice-content>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
  import InvoiceSider from '@/views/invoice/components/invoice-sider.vue';
  import InvoiceContent from '@/views/invoice/components/invoice-content.vue';
  import { ref } from 'vue';

  const invoiceContentRef = ref();
  const id = ref<string>();
  const changeRuleId = (ruleId: string) => {
    id.value = ruleId;
    invoiceContentRef.value.getInvoiceDetail(ruleId);
  };
</script>

<style scoped>
  .layout-demo {
    height: 82vh;
    background: var(--color-fill-2);
    border: 1px solid var(--color-border);
  }
</style>
